<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Hello World</title>
    <script src="node_modules/cesium/Build/Cesium/Cesium.js"></script>
    <link href="node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
    This is a simple HTML file!
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMjE1ZGJlNy0xYzBhLTRmZTUtOWY4NC0yZjYyN2Y1YjU5OTEiLCJpZCI6MzUwNzk1LCJpYXQiOjE3NjA1MzUwMjR9.RZuv_fXgOvWe3ytXnApxpO3zRMuhaGr11Fy7lvTHV7A';
        const viewer = new Cesium.Viewer('cesiumContainer');
        fetch('./data/cities.json')
            .then(res => res.json())
            .then(cities => {
                cities.forEach(city => {
                    viewer.entities.add({
                        name: city.name,
                        position: Cesium.Cartesian3.fromDegrees(city.lon, city.lat),
                        description: city.description,
                        point: {
                            pixelSize: 10,
                            color: Cesium.Color.YELLOW,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2,
                            height: 0
                        },
                        label: {
                            text: city.name,
                            font: '14pt sans-serif',
                            pixelOffset: new Cesium.Cartesian2(0, -40),
                            fillColor: Cesium.Color.WHITE,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth: 2,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE
                        }
                    });
                });
            })
            .catch(err => {
                console.error('城市数据加载失败:', err);
            });
    </script>
</body>